<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>食货志</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.0.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        var userId, pass, role, account, oldName;
        var oGender, oAge, oAddress;
        // 启动Ajax获取用户信息
        $.ajax({
            url: "homePage",
            type: "post",
            dataType: "json",
            success: function (user) {
                if (user != null) {
                        oldName = user.name;
                        oGender = user.gender;
                        oAge = user.age;
                        oAddress = user.address;
                        $("#account").val(user.account);
                        $("#name").val(oldName);
                        $("#gender").val(oGender);
                        $("#age").val(oAge);
                        $("#address").val(oAddress);
                        userId = user.userId;
                        pass = user.pass;
                        role = user.role;
                        account = user.account;
                        // 经过测试，发现用户修改时由于后端通过对象保存状态，因此需要发送用户的全部信息否则会丢失没有发送的信息
                        // 这是因为session中保存的是user对象
                        // alert("用户role：" + role + "\npass：" + pass + "\naccount:" + account);
                        // 设置性别
                    if (user.gender == "男") {
                        $("#male").attr("checked", "true");
                    } else if (user.gender == "女") {
                        $("#female").attr("checked", "true");
                    }
                } else {
                    alert("您还没有登录，快去登录吧~");
                    window.parent.location.href = "main.html";
                }
            },
            error: function () {
                alert("服务器错误，正在抢修中~");
            }
        });
        // 修改用户信息
        function modifyUserInfo() {
            var tag1 = oldName != $("#name").val();
            var tag2 = oGender != $(":radio:checked").next("label").text();
            var tag3 = oAge != $("#age").val();
            var tag4 = oAddress != $("#address").val();
            // 只要有信息与之前不一致，就可以修改信息
            if (tag1 || tag2 || tag3 || tag4) {
                var formJson = {};
                formJson.userId = userId;
                formJson.name = $("#name").val();
                // TODO 获取单选框的值还有许多种表示法
                formJson.gender = $(":radio:checked").next("label").text();
                formJson.age = $("#age").val();
                formJson.address = $("#address").val();
                // TODO 避免数据丢失，把用户的全部信息发送发去（因为后端使用对象保存，必须对所有对象变量赋值）
                formJson.pass = pass;
                formJson.account = account;
                formJson.role = role;
                // TODO 可以改进的地方是，单选框的值不可能为空，因此可以删去该判断
                if (formJson.name == "" && (formJson.gender == "" || formJson.age == "" || formJson.address == "")) {
                    alert("按钮要被你玩坏了~请正确填写个人信息");
                    return;
                }
                // 把JSON数据转换成字符串，然后通过Ajax发往后端
                var userData = JSON.stringify(formJson);
                $.ajax({
                    url: "modifyUserInfo",
                    type: "post",
                    data: {"userInfo": userData},
                    success: function (data) {
                        if (data == "ok") {
                            alert("信息修改成功！");
                            window.location.href = "userInfoEdit.html";
                        } else {
                            alert("修改失败，请稍后再试!");
                        }
                    },
                    error: function () {
                        alert("服务器异常，修改失败!");
                    }
                });
            }
        }
        // 检查用户昵称是否可用
        $(function () {
            $("#name").blur(function () {
                // 如果名字没有修改或者为空，不执行函数
                if (oldName == $("#name").val() || "" == $("#name").val()) {
                    // alert("名字没有修改，不执行Ajax");
                    $("#tips").hide();
                    return;
                }
                $.ajax({
                    url: "nameCheck", type: "post", data: {"name":$("#name").val()},
                    success:function (data) {
                        if (data == "ok") {
                            // 设置标签属性和内容
                            $("#tips").attr("class", "text-success");
                            $("#tips")[0].innerHTML = "该昵称可用";
                        } else {
                            $("#tips").attr("class", "text-muted");
                            $("#tips")[0].innerHTML = "这个昵称太抢手啦，换一个吧~";
                            // 把名字换过来
                            $("#name").val(oldName);
                        }
                    },
                    error:function () {
                        alert("服务器异常，正在抢修中！！");
                    }
                });
            });
        })
    </script>
</head>
<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="account">账号：</label>
                <input type="text" class="form-control" id="account" value="admin" readonly>
            </div>
            <div class="form-group">
                <label for="name">昵称：</label>
                <input type="text" class="form-control" id="name">
                <span id="tips"></span>
            </div>
            <div class="form-group">
                <label>性别：</label>
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" class="custom-control-input" id="male" name="gender">
                    <label class="custom-control-label" for="male">男</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" class="custom-control-input" id="female" name="gender">
                    <label class="custom-control-label" for="female">女</label>
                </div>
            </div>
            <div class="form-group">
                <label for="age">年龄：</label>
                <input type="number" class="form-control" id="age" min="0" max="130">
            </div>
            <div class="form-group">
                <label for="address">地址：</label>
                <input type="text" class="form-control" id="address">
            </div>
            <button id="saveBtn" type="button" class="btn btn-primary" onclick="modifyUserInfo()">保存修改</button>
        </form>
    </div>
</body>
</html>